<template>
  <div
    class="ban"
    :style="`background-image:url(${banner}?imageView&blur=40x20)`"
    @mouseenter="stopBanner"
    @mouseleave="stopBanner"
  >
    <div class="warp">
      <div class="ban-img">
        <a href="javascript:;">
          <img
            :src="
              banner
                ? `${banner}?imageView&quality=89`
                : require('../../../common/images/bgb.png')
            "
            :class="cla"
            v-if="flag"
          />
          <el-skeleton :rows="5" class="shade" v-else />
        </a>
      </div>
      <a href="javascript:;" class="btnl" @mouseup="next(-1)"></a>
      <a href="javascript:;" class="btnr" @mouseup="next(1)"></a>

      <DownloadIcon></DownloadIcon>
    </div>
  </div>
</template>

<script>
import DownloadIcon from "@/pages/homePage/components/DownloadIcon.vue";
import { getBannerFn } from "@/api/index.js";
import { nextTick, onActivated, onDeactivated, ref } from "vue";

export default {
  name: "HomeBanner",
  components: { DownloadIcon },
  setup() {
    let banner = ref(null);
    let banners = null;
    let index = 0;
    let setInt = null;
    let cla = ref("A");
    let flag = ref(false);

    function startTrans(i) {
      cla.value = "b";
      setTimeout(() => {
        cla.value = "c";
        banner.value = banners[i].imageUrl;
        setTimeout(() => {
          cla.value = "A";
        }, 1000);
      }, 1000);
    }
    function startBanner() {
      setInt = setInterval(() => {
        if (index === banners.length - 1) {
          index = 0;
          startTrans(index);
        } else {
          index += 1;
          startTrans(index);
        }
      }, 5000);
    }
    function stopBanner() {
      if (setInt === null) {
        clearInterval(setInt);
        startBanner();
      } else {
        clearInterval(setInt);
        setInt = null;
      }
    }

    function next(i) {
      if (index + i === banners.length) {
        index = 0;
        banner.value = banners[index].imageUrl;
      } else if (index + i < 0) {
        index = banners.length - 1;
        banner.value = banners[index].imageUrl;
      } else {
        index = index + i;
        banner.value = banners[index].imageUrl;
      }
    }
    getBannerFn().then((response) => {
      banners = response.data.banners;
      banner.value = response.data.banners[0].imageUrl;
      flag.value = true;
      nextTick(() => {
        if (setInt === null) {
          startBanner();
        }
      });
    });

    onActivated(() => {
      if (setInt === null) {
        startBanner();
      }
    });
    onDeactivated(() => {
      clearInterval(setInt);
      setInt = null;
    });

    return {
      banner,
      cla,
      stopBanner,
      next,
      flag,
    };
  },
};
</script>

<style scoped lang="less">
.ban {
  background-size: 6000px;
  background-position: center center;
}
.warp {
  position: relative;
  width: 982px;
  height: 285px;
  margin: 0 auto;
}
.shade {
  display: block;
  width: 730px;
  height: 285px;
}

.ban-img {
  width: 100%;
  height: 285px;
  overflow: hidden;
  img {
    display: block;
    width: 730px;
    height: 285px;
  }
}
img[src=""],
img[src="null?imageView&quality=89"] img:not([src]) {
  opacity: 0;
}
.A {
  transition: none 0s ease 0s;
  opacity: 1;
}
.b {
  transition: opacity 1s ease-in 0s;
  opacity: 0.2;
}
.c {
  transition: opacity 1s ease-out 0s;
  opacity: 1;
}
.btnl {
  display: block;
  position: absolute;
  top: 50%;
  left: -68px;
  margin-top: -31px;
  width: 37px;
  height: 63px;
  background: url(../../../common/images/banner.png) no-repeat 0 -360px;
  &:hover {
    background-position: 0 -430px;
  }
}
.btnr {
  display: block;
  position: absolute;
  top: 50%;
  right: -68px;
  margin-top: -31px;
  width: 37px;
  height: 63px;
  background: url(../../../common/images/banner.png) no-repeat 0 -508px;
  &:hover {
    background-position: 0 -578px;
  }
}
</style>
